<template>
  <div class="type_page">
    <div class="log_or_reg" >
      <div @click.prevent="right_drawer = true" v-show="loginstatus">
        <a href="#">登录</a>
      </div>
      <div class="username" v-show="status">
        <p class="hyn">
          <img :src="head" alt="" class="img112" >{{ username }}
          <ul class="hyn1">
            <li > 
              <img src="../assets/exit.png" alt="">
            </li>
            <li>
              <a href="#" @click="exit" style="position:relative;left:-20px;top:3px;">退出</a>
            </li>
          </ul>
        </p>
      </div>
    </div>
    <div class="header_logo">
      <router-link to="/"
        ><img src="../assets/small_log.jpg" alt="YiJi_logo"
      /></router-link>
    </div>
    <div class="header_left_nav">
      <ul>
        <li>
          <router-link to="/productmanissue" active-class="onactive"
            >男士</router-link
          >
        </li>
        <li>
          <router-link to="/productwomanissue" active-class="onactive"
            >女士</router-link
          >
        </li>
        <li>
          <router-link to="/community" active-class="onactive"
            >社区</router-link
          >
        </li>
        <li>
          <router-link to="/essayissue" active-class="onactive"
            >文章创作</router-link
          >
        </li>
      </ul>
    </div>
    <div class="header_right_nav">
      <input
        type="text"
        class="input_search"
        placeholder="搜索"
        @click="top_drawer = true"
      />
      <el-drawer
        title="上侧搜索抽屉"
        :visible.sync="top_drawer"
        :with-header="false"
        direction="ttb"
        ref="searchDrawer"
        size="30%"
      >
        <h1>YIJI LIFE</h1>
        <svg
          t="1634697741123"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2418"
          width="28"
          height="28"
        >
          <path
            d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z"
            fill="#3D3D3D"
            p-id="2419"
          ></path>
        </svg>
        <input
          type="text"
          placeholder="你在寻找什么？"
          @keydown="entersearch()"
          id="searchcontent"
          onfocus="this.placeholder=''"
        />
        <hr />
      </el-drawer>
      <ul>
        <li class="navfansli">
          <img src="../assets/icon_fans.png" alt=""
          />
          <div class="navfans"><Fans></Fans></div>
        </li>
        <li>
          <router-link to="/cart"
            ><el-badge :value=valueNum class="item"><img src="../assets/icon_buy.png" alt="" 
          /></el-badge></router-link>
        </li>
        <li>
          <router-link to="/personal"
            ><img src="../assets/icon_user_manage.png" alt=""
          /></router-link>
        </li>
          <li>
          <router-link to="/Order"
            ><img src="../assets/dd2.png" alt="" style="width:33px;height:33px"
          /></router-link>
        </li>
      </ul>
    </div>
    <el-drawer
      title="右侧登录注册抽屉"
      :visible.sync="right_drawer"
      :with-header="false"
      ref="loginDrawer"
    >
      <div class="drawer_right">
        <h2 v-show="logOrReg">
          登录<span>没有账号?</span
          ><span @click.prevent="changeLogOrReg">点此注册</span>
        </h2>
        <h2 v-show="!logOrReg">注册</h2>
        <form class="form-horizontal" v-show="logOrReg">
          <div class="form-group">
            <label for="inputUsername" class="col-sm-2 control-label"
              >用户名</label
            >
            <div class="col-sm-8">
              <input
                type="text"
                class="form-control"
                id="inputUsername"
                placeholder="请输入用户名或手机号"
                v-model="user_name"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword" class="col-sm-2 control-label"
              >密码</label
            >
            <div class="col-sm-8">
              <input
                type="password"
                class="form-control"
                id="inputPassword"
                placeholder="请输入密码"
                v-model="user_pwd"
              />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-4 col-sm-2">
              <button
                type="submit"
                class="btn btn-primary"
                @click.prevent="logining()"
              >
                登录
              </button>
            </div>
          </div>
        </form>
        <form class="form-horizontal" v-show="!logOrReg">
          <div class="form-group">
            <label for="inputUsername" class="col-sm-2 control-label"
              >用户名</label
            >
            <div class="col-sm-8">
              <input
                type="text"
                class="form-control"
                id="inputUsername"
                placeholder="请输入用户名"
                v-model="user_name"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputUsername" class="col-sm-2 control-label"
              >手机号</label
            >
            <div class="col-sm-8">
              <input
                type="text"
                class="form-control"
                id="inputUsername"
                placeholder="请输入手机号"
                v-model="user_phone"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputUsername" class="col-sm-2 control-label"
              >验证码</label
            >
            <div class="col-sm-4">
              <input
                type="text"
                class="form-control"
                id="inputUsername"
                placeholder="请输入验证码"
                v-model="verificationCode"
              />
            </div>
            <button
              class="btn btn-primary col-sm-3 sendVc"
              @click.prevent="Verificationing"
            >
              发送验证码
            </button>
          </div>
          <div class="form-group">
            <label for="inputPassword" class="col-sm-2 control-label"
              >密码</label
            >
            <div class="col-sm-8">
              <input
                type="password"
                class="form-control"
                id="inputPassword"
                placeholder="请输入密码"
                v-model="user_pwd"
              />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-3 col-sm-2">
              <button class="btn btn-primary" @click.prevent="changeLogOrReg">
                返回登录
              </button>
            </div>
            <div class="col-sm-offset-1 col-sm-4">
              <button class="btn btn-primary" @click.prevent="registering()">
                注册并登录
              </button>
            </div>
          </div>
        </form>
      </div>
    </el-drawer>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>{{ Message }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Fans from "@/components/Fans.vue";
import $ from "jquery";
export default {
  name: "MyNav",
  data() {
    return {
      right_drawer: false,
      top_drawer: false,
      logOrReg: true,
      loginstatus1: true,
      product: [],
      user_pwd: "",
      user_phone: "",
      user_name: "",
      user_id: "",
      verificationCode: "",
      fromName: "",
      randomNum: "",
      dialogVisible: false,
      Message: "",
      datas: [],
      valueNum: "",
      head: "",
      addState: "",
      delState:"",
      cartState:""
    };
  },
  methods: {
    getAllProuductById() {
      this.$axios
        .post("/api/users/getAllProuductById", {
          user_id: localStorage.getItem("user_id"),
        })
        .then((res) => {
          this.valueNum = res.data.results;
        });
    },
    exit() {
      localStorage.removeItem("token");
      this.$store.state.user.status = false;
      this.$store.state.user.loginstatus = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    Verification() {
      let reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (reg_tel.test(this.user_phone)) {
        this.$axios
          .get("/api/users/getValidCode", {
            params: {
              user_phone: this.user_phone,
            },
          })
          .then((res) => {
            if (res.data.msg == "ok") {
              this.randomNum = res.data.Num;
              this.Message = "发送验证码成功！";
            } else {
              this.Message = "发送验证码失败，请重新发送！";
            }
          })
      } else {
        this.Message = "手机号格式错误，请重新填写";
      }
    },
    login() {
      if (this.user_name == "" || this.user_pwd == "") {
        this.Message = "请填写完整信息";
      } else {
        this.$axios
          .post("/api/users/login", {
            user_pwd: this.user_pwd,
            user_name: this.user_name,
          })
          .then((res) => {
            if (res.data.msg == "ok") {
              this.Message = "登录成功，欢迎您，" + this.user_name;
              this.user_id = res.data.id;
              localStorage.setItem("token", res.data.data);
              localStorage.setItem("user_id", this.user_id);
            } else {
              this.Message = "登录失败，请确认账号密码重新登录";
              this.user_pwd = "";
              return Promise.reject();
            }
          })
          .then(() => {
            this.$refs.loginDrawer.closeDrawer();
            if (localStorage.getItem("token")) {
              this.$store.state.user = {
                user_name: this.user_name,
                user_phone: this.user_phone,
                status: !this.status,
                loginstatus: !this.loginstatus1,
              };
            }
            this.$router.go(0);
          })
      }
    },
    register() {
      if (
        this.verificationCode == "" ||
        this.user_pwd == "" ||
        this.user_phone == "" ||
        this.user_name == ""
      ) {
        this.Message = "请填写完整信息";
      } else {
        if (this.verificationCode == this.randomNum) {
          let patrn = /^(\w){6,20}$/;
          if (patrn.test(this.user_pwd)) {
            this.$axios
              .post("/api/users/register", {
                user_pwd: this.user_pwd,
                user_phone: this.user_phone,
                user_name: this.user_name,
              })
              .then((res) => {
                if (res.data.msg == "注册失败") {
                  this.Message = "注册失败,手机号或用户名重复。";
                } else {
                  this.Message = "注册成功,请登录";
                  this.logOrReg = !this.logOrReg;
                }
              });
          } else {
            this.Message = "请输入任意6-20位密码，仅限数字与字母";
            this.user_pwd = "";
          }
        } else {
          this.Message = "验证码错误，请重新输入";
          this.verificationCode = "";
        }
      }
    },
    changeLogOrReg() {
      this.logOrReg = !this.logOrReg;
    },
    entersearch() {
      var event = window.event || arguments.callee.caller.arguments[0];
      if (event.keyCode == 13) {
        let keyword = $("#searchcontent").val();
        if (this.$route.path.slice(1) != "productissueshow") {
          this.$axios
            .get(`/api/product/getProductByKeywords?goods_title=${keyword}`)
            .then((res) => {
              this.product = res.data.results;
              this.$router.push({
                name: "ProductIssueShow",
                params: { id: this.product },
              });
            })
        } else {
          this.$axios
            .get(`/api/product/getProductByKeywords?goods_title=${keyword}`)
            .then((res) => {
              this.product = res.data.results;
              this.$router.push({
                name: "ProductIssueShow",
                params: { id: this.product },
              });
            });
        }
        this.$refs.searchDrawer.closeDrawer();
      }
    },
    changedialogVisible() {
      this.dialogVisible = true;
    },
    logining() {
      this.changedialogVisible();
      this.login();
    },
    registering() {
      this.changedialogVisible();
      this.register();
    },
    Verificationing() {
      this.changedialogVisible();
      this.Verification();
    },
  },
  watch: {
    $route(to, from) {
      this.fromName = from.name;
      this.$bus.$emit("fromName", this.fromName);
    },
    addState: function () {
      this.getAllProuductById()
    },
    delState: function (newval,oldval) {
      this.getAllProuductById()
    },
    cartState: function (newval,oldval) {
      this.getAllProuductById()
    },
  },
  components: {
    Fans,
  },
  computed: {
    username() {
      return this.$store.state.user.user_name;
    },
    status() {
      return this.$store.state.user.status;
    },
    loginstatus() {
      return this.$store.state.user.loginstatus;
    },
  },
  //别动它求求了
  created() {
    this.getAllProuductById()
    if (localStorage.getItem("mystore")) {
      //把本地存储中的数据写入仓库里
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(localStorage.getItem("mystore"))
        )
      );
    }
    // 设置监听网页卸载事件
    window.addEventListener("beforeunload", () => {
      //保存当前的仓库数据到本地存储中
      if (!localStorage.getItem("token")) {
        this.$store.state.user = {
          user_name: "",
          user_phone: "",
          status: false,
          loginstatus: this.loginstatus1,
          user_img:''
        };
      }
      localStorage.setItem("mystore", JSON.stringify(this.$store.state));
    });
  },
  mounted() {
    this.$bus.$on("zhenhao", (res) => {
      this.cartState = res;
    });
    this.$bus.$on("passOnAddState", (res) => {
      this.addState = res;
    });
    this.$bus.$on("passOnDelState", (res) => {
      this.delState = res;
    });
    this.$axios
      .get("/api/users/getUserInfo", {
        params: {
          user_id: localStorage.getItem("user_id"),
        },
      })
      .then((res) => {
        this.datas = res.data.results;
        if (this.datas[0].user_pic == null || this.datas[0].user_pic=="") {
          this.head = require("../assets/small_log.jpg");
        } else {
          this.head = "http://localhost:3000/images/" + this.datas[0].user_pic;
        }
      })
  },
};
</script>
 
<style>
.username {
  margin-top: 5px;
}
.username p {
  font-size: 17px;
  font-weight: 600;
}
.img112 {
  width: 30px;
  height: 30px;
  border: 1px solid #999;
  border-radius: 50%;
  margin-right: 5px;
}
.hyn1 {
  position: absolute;
  top: 30px;
  right: -20px;
  width: 100px;
  height: 40px;
  background-color: #fff;
  box-shadow: 6px 5px 5px #999999;
  z-index: 50;
  display: none;
}
.hyn1 img {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
}
.hyn1 li {
  /* text-align:center; */
  font-size: 15px;
  float: left;
}
.hyn1 li a:hover {
  color: #999;
}
.hyn {
  position: relative;
}
.hyn:hover .hyn1 {
  display: block;
}

input::-ms-input-placeholder {
  text-align: center;
}
input::-webkit-input-placeholder {
  text-align: center;
}
.onactive {
  background-color: royalblue;
  border-radius: 10px;
}
.sendVc {
  height: 35px;
}
.form-group > div button {
  width: 100px;
  height: 40px;
  margin-left: 0px;
}

.log_or_reg {
  float: right;
  margin-top: 20px;
  margin-left: 20px;
  color: #000;
  font-size: 16px;
  display: flex;
}

.log_or_reg > div a {
  text-decoration: none;
  color: #000;
  display: block;
  padding: 8px;
}
.drawer_right h2 {
  padding-left: 80px;
  margin-bottom: 30px;
}
.drawer_right h2 > span:first-child {
  font-size: 15px;
  margin-left: 110px;
}
.drawer_right h2 span + span {
  color: #fff;
  cursor: pointer;
  font-size: 15px;
}
header {
  height: 80px;
}

.type_page {
  width: 1170px;
  height: 80px;
  margin: 0px auto;
}

.header_logo {
  width: 60px;
  height: 60px;
  float: left;
  border: 1px solid #ccc;
  margin: 10px;
}

.header_logo img,
.header_right_nav img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header_left_nav {
  width: 400px;
  height: 60px;
  float: left;
  margin: 10px;
}

.header_left_nav a {
  text-decoration: none;
  color: #000;
}

.header_left_nav ul li {
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  font-weight: 500;
  margin-left: 20px;
  float: left;
}
.header_left_nav ul li:last-child a {
  width: 100px;
}

.header_left_nav ul li a {
  width: 60px;
  height: 60px;
  display: inline-block;
}

.header_left_nav ul li a:hover {
  cursor: pointer;
  background-color: #ccc;
  color: black;
  text-decoration: none;
}

.header_right_nav {
  width: 500px;
  height: 60px;
  float: left;
  margin-top: 10px;
}

.header_right_nav ul {
    position: relative;
    width: 220px;
    height: 60px;
    float: right;
    left: 50px;
    top: -40px;
}
.header_right_nav ul li:nth-child(4){
  position: absolute;
  right: 16px;
  top: 4px;
}
.header_right_nav > ul > li {
  width: 40px;
  height: 40px;
  margin: 0px;
  float: left;
}
.navfansli:hover {
  cursor: pointer;
}
.navfansli:hover .navfans {
  display: block;
}
.navfans {
  display: none;
  width: 500px;
  height: 350px;
  background-color: #fff;
  position: relative;
  right: 120px;
  z-index: 10;
  clear: both;
  overflow-y: scroll;
  box-shadow:2px 2px 30px  #ccc;
}
.navfans ul {
  width: 100%;
}

.input_search {
  margin-left: 130px;
  height: 40px;
  width: 170px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 20px;
  background-image: url(../assets/search.png);
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: right;
}
.drawer_right_father {
  width: 100%;
  height: 100%;
  background-color: red;
  margin-top: 0;
}
.drawer_right {
  width: 100%;
  height: 200px;
  margin-top: 30%;
}
.el-drawer__body {
  background-image: url(../assets/ocean.jpg);
  background-size: cover;
  overflow: scroll;
  overflow-y: hidden;
}

.header_right_nav .el-drawer {
  height: 54% !important;
}
.header_right_nav .el-drawer h1 {
  font-size: 50px;
  font-weight: 700;
  text-align: center;
  margin-top: 30px;
}
.header_right_nav .el-drawer svg {
  margin-left: 22%;
  position: relative;
  top: 2%;
  right: 1%;
}
.header_right_nav .el-drawer input {
  width: 56%;
  height: 53px;
  margin-top: 12px;
  font-size: 30px;
  font-weight: 400;
  outline: none;
  border: none;
}
.header_right_nav .el-drawer input:focus {
  border: none;
}
.header_right_nav .el-drawer hr {
  width: 59%;
  height: 2px;
  margin-left: 21%;
  background-color: #000;
}
</style>